<template>
	<view>
		<u-navbar
			title="常见问题"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view style="background-color: #fff;" v-if="list1.length>0">
			<u-tabs :current="current" @click="tabClick" :list="list1" :lineColor="appColor" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
		</view>
		<template v-if="loading">
			<view style="padding: 32rpx;">
				<u-skeleton :avatarSize="0" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="7" v-for="i in 4" :key="i"></u-skeleton>
			</view>
		</template>
		<template v-else-if="!loading && list.length === 0">
			<u-empty
			    mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
		</template>
		<template v-else-if="!loading && list.length > 0">
			<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
				<view style="height: 16rpx;"/>
				<view style="background-color: #fff;">
					<u-collapse accordion>
						<u-collapse-item
						  :title="item.title"
						  :name="item.id"
						  v-for="(item, index) in list"
						  :key="index"
						>
						  <text class="u-collapse-content">{{item.value}}</text>
						</u-collapse-item>
					</u-collapse>
				</view>
			</scroll-view>
		</template>
	</view>
</template>

<script>
	import {basisQuestionCategory, basisQuestion} from '@/api/me.js'
	export default {
		data() {
			return {
				list1: [],
				list: [],
				loading: true,
				current: 0
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 + 'px';
			}
		},
		onLoad() {
			this.basisQuestionCategory();
		},
		methods: {
			tabClick({index}) {
				this.current = index;
				this.basisQuestionCategory();
			},
			basisQuestionCategory() {
				this.loading = true;
				let postObj = {
					pageNo: 1,
					pageSize: 20,
				}
				if(this.list1.length > 0) {
					postObj.categoryId = this.list1[this.current].id;
				}
				if(this.current === 0) {
					delete postObj.categoryId
				}
				basisQuestionCategory(postObj).then(res => {
					basisQuestion(postObj).then(res1 => {
						this.list1 = [{name: '全部'}].concat(res.result.records);
						this.list = res1.result.records;
					}).finally(() => {
						this.loading = false
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>